import {DatePicker, Form, Image, Input, message, Modal, Select, InputNumber,Radio} from 'antd';
import { StepsForm} from "@ant-design/pro-form";
import ProCard from "@ant-design/pro-card";
import {useState} from "react";
import Product from "./Product";
import ProTable from "@ant-design/pro-table";
import CommodityMap from '@/components/CommodityMap'
import Editor from "@/pages/ManageGoods/components/Editor";
import {CloseOutlined} from "@ant-design/icons";
import './index.less';
import {Link} from "@umijs/preset-dumi/lib/theme";

const { TextArea } = Input;
const { RangePicker } = DatePicker;
const { Option } = Select;

const GetGoods = (props) => {
  const {isModalGoods,goodsOk,goodsCancel} = props
  //  商品列表 modal 状态
  const [modalGoodLists, setModalGoodLists] = useState(false)
  //  商品图片 modal 状态
  const [modalGoodsImages,setModalGoodsImages] = useState(false)
  //  经 Form.useForm() 创建的 form 控制实例
  const [form] = Form.useForm();
  //  更改图片
  const [src,setSrc] = useState('https://images.uiiiuiii.com/wp-content/uploads/2019/11/itz-logo20191115-2-33.jpg');
  //  定义轮播图的数据
  const [slider,setSlider] = useState([])
  //  定义轮播图的数据
  const [lists,setLists] = useState([])
  //  定义图片 modal 的名称
  const [titleName,setTitleName] = useState('选择商品主图')
  //  定义选中图片名称
  const [imageUrl,setImageUrl] = useState([])

  const submitValues = (values) => {
    setModalGoodLists(false)
    console.log(values)
    // actionRef.current?.reload()
    setSrc(values.image_url)
    setSlider(values.slider_image_url)
    setLists(values)
  }


  const columns = [
    {
      title: '选择',
      dataIndex: 'radio',

    },
    {
      title: '颜色',
      dataIndex: 'text',
      key: 'color'
    },
    {
      title: '图片',
      dataIndex: 'image',
      key: 'image',
      render: (_,record)=> [
        <Image
          width={80}
          src={record.image}
        />
      ]
    },
    {
      title: '砍价起始金额',
      dataIndex: 'decs',
      render: ()=>[
        <InputNumber min={1}  defaultValue={1899}  />
      ]
    },
    {
      title: '砍价最低价',
      dataIndex: 'decs',
      render: ()=>[
        <InputNumber min={1}  defaultValue={0}  />
      ]
    },
    {
      title: '成本价',
      dataIndex: 'money',
      key: 'money'
    },
    {
      title: '原价',
      dataIndex: 'money',
      key: 'money'
    },
    {
      title: '库存',
      dataIndex: 'money',
      key: 'money'
    },
    {
      title: '限量',
      dataIndex: 'decs',
      render: ()=>[
        <InputNumber min={1}  defaultValue={0}  />
      ]
    },
    {
      title: '重量(KG)',
      dataIndex: 'money',
      key: 'money'
    },
    {
      title: '体积(m³)',
      dataIndex: 'money',
      key: 'money'
    },
    {
      title: '商品编号',
      dataIndex: 'money',
      key: 'money'
    },
  ];


  return (
    <Modal
      title="添加砍价商品"
      footer={false}
      visible={isModalGoods}
      onOk={()=>{
        form.validateFields().then(values=>{
          goodsOk(values)
        })
      }}
      onCancel={goodsCancel}
      width={1000}
    >
     <Form
       form={form}
       name="basic"
       labelCol={{ span: 8 }}
       wrapperCol={{ span: 16 }}
       initialValues={lists}
       // onFinish={onFinish}
       // onFinishFailed={onFinishFailed}
       autoComplete="off"
     >
       <StepsForm
         onFinish={async (values) => {
           message.success('提交成功');
         }}
         formProps={{
           validateMessages: {
             required: '此项为必填项',
           },
         }}
       >
         <StepsForm.StepForm
           name="base"
           title="第一步骤"
           onChange={(value)=>{

           }}
         >
           <ProCard
             headerBordered
             style={{
               marginBottom: 10,
               minWidth: 900,
               maxWidth: '100%',
             }}
           >
             <Form
               name="basic"
               labelCol={{ span: 8 }}
               wrapperCol={{ span: 16 }}
             >
               <Form.Item
                 label="请选择商品"
                 name="username"
                 // rules={[{ }]}
               >
                 <Image
                   width={80}
                   preview={false}
                   src={src}
                   style={{cursor: 'pointer'}}
                   onClick={() => {
                     setModalGoodLists(true)
                   }}
                 />
               </Form.Item>
             </Form>
             {
               modalGoodLists ? <Product
                 isModalGoodLists={modalGoodLists}
                 goodListsOk={submitValues}
                 goodListsCancel={()=>{
                   setModalGoodLists(false)
                 }}
               /> : null
             }

           </ProCard>
         </StepsForm.StepForm>
         {/* 第二步 */}
         <StepsForm.StepForm name="checkbox" title="第二步骤">
           <ProCard
             style={{
               minWidth: 900,
               marginBottom: 10,
               maxWidth: '100%',
             }}
           >
             <Form form={form}>
               <Form.Item
                 label="商品主图"
                 rules={[{ required: true, message: '请选择商品主图' }]}
               >
                 <Image
                   className='images'
                   preview={false}
                   src={src}
                   style={{cursor: 'pointer'}}
                   onClick={() => {
                     // @ts-ignore
                     setModalGoodsImages(true)
                   }}
                 />
               </Form.Item>
               {
                 modalGoodsImages ? <CommodityMap
                   title={titleName}
                   imageUrl={imageUrl}
                   isModalGoodImages={modalGoodsImages}
                   setModalGoodsImages={setModalGoodsImages}
                   goodImagesCancel={()=>{
                     setModalGoodsImages(false)
                   }}
                 /> : null
               }

               <Form.Item
                 label="商品轮播图"
                 rules={[{ required: true, message: '请选择商品轮播图' }]}
               >
                 {
                   slider.map((item,index)=>{
                     return (
                       <div key={item.id} className='rotation-chart'>
                         <div className='close' onClick={()=>{
                           let add = [...slider]
                           add.splice(index,1)
                           setSlider(add)
                         }}>
                           <CloseOutlined />
                         </div>
                         <Image
                           className='images'
                           preview={false}
                           src={item}
                         />
                       </div>
                     )
                   })
                 }
                 {
                   slider.length <= 10 ? <Image
                     className='images'
                     preview={false}
                     src={src}
                     style={{cursor: 'pointer'}}
                     onClick={() => {
                       setTitleName('选择轮播图')
                       // @ts-ignore
                       setModalGoodsImages(true)
                     }}
                   /> : null
                 }
               </Form.Item>
               <Form.Item
                 label="砍价活动名称"
                 name='product_name'
                 style={{ width: '300px' }}
                 rules={[{ required: true, message: '请输入砍价活动名称' }]}
                 // initialValue={'zzzzzz'}
               >

                 <Input placeholder='请输入砍价活动名称' value={lists.product_name}/>
               </Form.Item>
               <Form.Item
                 label="砍价活动简介"
                 name="brief"
                 rules={[{ required: true, message: '请输入砍价活动简介' }]}
               >
                 <TextArea rows={4} placeholder='请输入砍价活动简介'/>
               </Form.Item>
               <Form.Item
                 label="活动时间"
                 name="time"
                 rules={[{ required: true, message: '请输入活动时间' }]}
               >
                 <RangePicker />
                 <span className='size-font'>设置活动开启结束时间，用户可以在设置时间内发起参与砍价</span>
               </Form.Item>
               <Form.Item
                 label="运费模板"
                 name="template"
                 rules={[{ required: true, message: '请输入活动时间' }]}
               >
                 <Select style={{width: '300px',marginRight: '10px'}}>
                   <Option value='1'>11111</Option>
                 </Select>

                  <Link
                   to={{
                     pathname: '../coupon/couponList',
                   }}
                  >
                   <span className='freight'>添加运费模板</span>
                  </Link>
               </Form.Item>
               <Form.Item
                 label="砍价人数"
                 name="people"
                 rules={[{ required: true, message: '请输入砍价人数' }]}
               >
                 <InputNumber min={1} max={10} defaultValue={0} style={{width: '300px'}}/>
                 <span className='size-font'>需要多少人砍价成功</span>
               </Form.Item>
               <Form.Item
                 label="帮砍次数"
                 name="frequency"
                 rules={[{ required: true, message: '请输入帮砍次数' }]}
               >
                 <InputNumber min={1} max={10} defaultValue={0} style={{width: '130px'}}/>
                 <span className='size-font'>单个商品用户可以帮砍的次数，例：次数设置为1，甲和乙同时将商品A的砍价链接发给丙，丙只能帮甲或乙其中一个人砍价</span>
               </Form.Item>
               <Form.Item
                 label="购买数量限制"
                 name="limit"
                 rules={[{ required: true, message: '请输入购买数量限制' }]}
               >
                 <InputNumber min={1} max={10} defaultValue={0} style={{width: '300px'}}/>
                 <span className='size-font'>单个活动每个用户发起砍价次数限制</span>
               </Form.Item>
               <Form.Item
                 label="单位"
                 name="company"
                 style={{ width: '300px' }}
                 rules={[{ required: true, message: '请输入单位' }]}
               >
                 <Input placeholder='请输入单位' defaultValue='件'/>
               </Form.Item>
               <Form.Item
                 label="排序"
                 name="sort"
               >
                 <InputNumber min={1} max={10} defaultValue={0} style={{width: '300px'}}/>
               </Form.Item>
               <Form.Item
                 label="活动状态"
                 name="type"
               >
                 <Radio.Group>
                   <Radio value={1}>开启</Radio>
                   <Radio value={2}>关闭</Radio>
                 </Radio.Group>
               </Form.Item>

               <ProTable
                 rowSelection={{
                   type: 'radio'
                 }}
                 columns={columns}
                 request={(params, sorter, filter) => {
                   // 表单搜索项会从 params 传入，传递给后端接口。
                   return Promise.resolve({
                     success: true,
                   });
                 }}
                 rowKey="outUserNo"
                 pagination={{
                   showQuickJumper: true,
                 }}
                 toolBarRender={false}
                 search={false}
               />

             </Form>

           </ProCard>
         </StepsForm.StepForm>
         {/* 第三步 */}
         <StepsForm.StepForm name="time" title="第三步骤">
           <ProCard
             style={{
               marginBottom: 16,
               minWidth: 800,
               maxWidth: '100%',
             }}
           >
             <Form.Item
               label="内容"
               name="company"
             >
               <Editor/>
             </Form.Item>
             <Form.Item
               label="规格"
               name="company"
             >
               <Editor/>
             </Form.Item>
           </ProCard>
         </StepsForm.StepForm>
       </StepsForm>
     </Form>
    </Modal>
  );
};

export default GetGoods;
